이전 아티클에서 Vercel 사용량 이슈에 대해 언급했었다. 이번 아티클에서는 이 문제를 해결한 방법에 대해 소개하고 공유하고자하고 비슷한 문제를 겪는사람들에게 도움이 되면 좋겠다. 이전 아티클에 대한 내용은 위 제목 클릭시 이동 가능합니다.
Vercel 사용량 문제 해결에 앞서 테스트 환경 구성
Vercel 사용량 문제를 해결하기 위해 테스트 환경을 구성하였다. 테스트 환경은 다음과 같다. 굳이 이렇게까지 할필요는 없지만 완벽하게 동일한 환경을 구성하기 위해 이렇게 구성하였다. 제일 큰 이유는 로컬환경에서는 테스트가 불가능해서 이렇게 구성하였다.
기존 Vercel에 똑같은 배포 환경 구성
기존 CloudFront에 기존과 똑같은 설정을 가진 환경 구성
기존 S3에 기존과 똑같은 설정을 가진 환경 구성
Route53 설정을 통해 테스트 도메인 연결
Vercel 사용량 문제 해결 과정
문제점
기존에 next.js의 proxy를 사용해서 브라우저에서 Cookie가 전송되지 않던 문제를 해소해서 사용하고 있었는데 next.js의 proxy를 사용하게되면 서버를 통해서 요청을 보내기 때문에 Vercel의 사용량이 증가하게 된다. 이는 Vercel의 사용량을 초과하게 되어서 요금이 굉장히 많이 발생하게 된다. 특히 HLS방식으로 미디어 파일을 가져올 경우에 이는 엄청난 사용량을 잡아먹게 된다.
우선 쿠키가 전송되지 않았던 문제점들을 AWS 공식문서를 정독해서 읽어가면서 잘못된 부분들을 찾아내었다.
우선 기존에 CF Response Header Policy 설정을 확인해보았는데 Access-Control-Allow-Credentials 를 true로 사용하게되면 Access-Control-Allow-Origin에 와일드카드(*)를 사용할 수 없다. 하지만 기존에 *.domain.com 형태로 와일드카드가 사용되고 있었다. 아마 이전 설정에 *가 아닌 *.domain.kr 형태로 설정해놓은게 와일드카드(*)로 인식하지 않고 명시적으로 도메인을 지정한 것으로 인식되어 있었던것 같다. 우선 첫 번째로 발견한 문제점은 이 부분이였다.
첫 번째로 발견한 문제점의 연장선의 느낌으로 발견한 두 번째 문제점은 기존 요청시 Cookie에 Secure, HttpOnly 속성 지정 누락 및 Domain 속성을 지정하지 않았던 문제, Domain 속성을 지정하지 않은 경우, 기본값은 현재 URL의 도메인 이름이고 이는 하위 도메인이 아닌 지정된 도메인 이름에만 적용된다. 간단하게 말하면 domain.kr 에서 a.domain.kr 로 요청시에 Cookie의 Domain에 domain.kr 로 되어 있어서 a.domain.kr로 쿠키를 함께 보내서 media file을 가져와야 하는데 CF의 Access-Control-Allow-Origin에 해당 도메인들에 대한 값을 추가해놓지않고 와일드카드로 등록되어 있어서 무효처리되고 쿠키가 전송되지 않았던 문제가 있었다.
우선 문서상에서는 Domain과 Path는 선택사항으로 나와있고 Secure와 HttpOnly는 필수로 지정해야한다고는 안나와있지만 보안상의 이유로 추가해서 수정을 진행했다.
해결 방법
위에서 발견한 문제점들을 해결하기 위해 다음과 같은 방법을 사용하였다.
기존에 사용하던 CF의 Response Header Policy 설정을 변경하였다. Access-Control-Allow-Origin에 와일드카드를 사용하지 않고 허용해야할 도메인들을 명시적으로 추가해주었다.
쿠키에 Secure, HttpOnly 속성을 추가하였다. 또한 Domain 속성을 추가하였다. 이는 기존에는 생략되어 있었던 부분이였다.
기존에 사용하던 next.js의 proxy를 사용하지 않고 직접 요청을 보내는 방식으로 변경하였다. 이는 Vercel의 사용량을 줄이기 위한 방법이였다.
이렇게 변경하고 테스트를 진행하였을 때 쿠키가 정상적으로 전송되는 것을 확인하였다.
결과
위 방식으로 각각 테스트 배포 환경에서 확인했을때 더이상 HLS방식으로 CF 요청시에 Vercel 사용량에 집계가 되지 않고 정상적으로 쿠키를 전송하여 미디어 파일들을 가져오는것을 확인했다. 이는 이제 서버에서 Cookie를 전송하는 방식에서 브라우저에서 직접 요청을 보내는 방식으로 변경하였기 때문에 Vercel의 사용량이 압도적으로 줄어들었다.
해당 문제로 인해 매달 발생하던 600-700 달러 정도의 추가 사용량은 앞으로 발생하지 않을 것으로 예상된다. 수정전 사용량을 기준으로 기존 하루 사용량 평균이 130GB 정도에서 수정후 1GB 미만으로 사용량이 줄어들었다. 수치로 환산하자면 99% 이상의 사용량이 줄어들었다고 볼 수 있다.
기존에 CF 설정을 직접했던게 아니여서 잘되어있을것이라 생각하고 꼼꼼히 확인해보지 못했던 부분으로 인해서 아쉬움이 많이 남았다. 당시에 팀 전체적으로 빠른 개발이 필요한 시기여서 다들 바쁘기도 하였고해서 잘 작동하고 있었기 때문에 크게 신경쓰지 않았던것이 문제였다. 추가로 공식문서에 사실 많은 정보들이 있었는데 이를 미리 확인하지 않았던것이 문제였다. 기존에도 알고있었지만.. 역시 공식문서에는 굉장히 많은것이 담겨있고 더 꼼꼼히 확인해야함을 다시한번 느꼈다.